<script>
import UniPopup from "../../../../../uni_modules/uni-popup/components/uni-popup/uni-popup.vue";

export default {
  name: "answerSheet",
  components: { UniPopup },
  props: {
    viewAnalysis: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      list: [],
    };
  },
  methods: {
    open(questionList) {
      this.$refs.popup.open();
      //触发数据刷新
      this.list = [];
      this.list = questionList;
    },
    getClass(item2) {
      //做题模式
      if (!this.viewAnalysis) {
        if (item2.userAnswer) {
          return "hasDo";
        }
        //查看解析模式
      } else {
        for (let childQuestion of item2.childQuestions) {
          if (childQuestion.answer) {
            if (childQuestion.userAnswer) {
              return "correct";
            }
          }
        }
        return "incorrect";
      }
    },
  },
  emits: ["select"],
};
</script>

<template>
  <uni-popup ref="popup" type="bottom">
    <view class="sheet-content">
      <view class="header">答题卡</view>
      <view class="content">
        <block v-for="(item, index) in list" :key="index">
          <view
            v-for="(item2, index2) in item.questions"
            :key="index2"
            @click="
              () => {
                $emit('select', index);
                $refs.popup.close();
              }
            "
            :class="'question-item ' + getClass(item2)"
            >{{ item2.serialNum }}
          </view>
        </block>
      </view>
    </view>
  </uni-popup>
</template>

<style scoped lang="scss">
.sheet-content {
  background: white;
  border-radius: 30rpx 30rpx 0 0;
  .header {
    padding: 30rpx;
    text-align: center;
    font-size: 34rpx;
  }
  .content {
    height: 40vh;
    padding: {
      left: 30rpx;
      right: 30rpx;
      bottom: 30rpx;
    }
    display: flex;
    flex-wrap: wrap;
    overflow: auto;
    .question-item {
      width: 94rpx;
      height: 94rpx;
      border-radius: 47rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 34rpx;
      margin: 22rpx;
      background: var(--gray-background-color);
      &.hasDo {
        background: var(--subtheme-color);
      }
      &.correct {
        background: #1b9b69;
        color: white;
      }
      &.incorrect {
        background: #e94f4f;
        color: white;
      }
    }
  }
}
</style>
